<template>
	<view class="interact">
		<uni-icons class="icon" type="redo" size="30" @click="onClickShare()">
			<text class="text">
				转发
			</text>
		</uni-icons>
		<uni-icons class="icon" type="chat" size="30" @click="onClickComment()">
			<text class="text">
				评论
			</text>
		</uni-icons>
		<uni-icons v-if="like===false" class="icon" type="hand-up" size="30" @click="onClickLike()">
			<text class="text">
				{{ interactInfo.like_count }}
			</text>
		</uni-icons>
		<uni-icons v-else class="icon" type="hand-up-filled" size="30" color="#E09AB5" @click="onClickLike()">
			<text class="text">
				{{ interactInfo.like_count }}
			</text>
		</uni-icons>
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue';
	import { store } from '@/uni_modules/uni-id-pages/common/store.js';
	defineProps(["interactInfo"]);
	
	const like = ref(false);
	const countLike = ref(2333);

	function onClickShare() {
		console.log("分享请求");
	}

	function onClickComment() {
		console.log("评论请求");
	}

	function onClickLike() {
		console.log("点赞请求");
		if (like.value === false) {
			countLike.value += 1;
		} else {
			countLike.value -= 1;
		}
		like.value = !like.value;
	}
</script>

<style lang="scss">
	.interact {
		display: flex;
		justify-content: space-between;
	}

	.icon {
		width: 33%;
	}

	.text {
		font-size: 30rpx;
		position: relative;
		top: -20%;
	}
</style>